<!--
 * @Descripttion: 
 * @version: 
 * @Author: wtzhang
 * @Date: 2021-05-27 10:25:30
 * @LastEditors: wtzhang
 * @LastEditTime: 2021-05-28 09:52:38
-->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="" id="user_form">
    <!-- <div>
      <label for="">用户名</label>
      <input type="text">
    </div>

    <div>
      <label for="">年龄</label>
      <input type="text" name="" id="" value="12">
    </div>

    <div>
      <label for="">职业</label>
      <select name="" id="">
        <option value="">学生</option>
        <option value="">老师</option>
        <option value="">死机</option>
        <option value="">画家</option>
        <option value="">演员</option>
        <option value="">电竞人</option>
      </select>
    </div> -->
  </form>
  <script type="text/template" id="tpl">
    <div>
      <label for="">用户名:</label>
      <input type="text" value="{{user.username}}">
    </div>
    <br>
    <div>
      <label for="">年&emsp;龄:</label>
      <input type="text" name="" id="" value="{{user.userage}}">
    </div>
    <br>
    <div>
      <label for="">职&emsp;业:</label>
      <select name="" id="">
        {{ each job }}
        {{ if user.job == $value.id}}
        <option value="{{ $value.id }}" selected>{{ $value.jobname }}</option>
        {{ else }}
        <option value="{{ $value.id }}">{{ $value.jobname }}</option>
        {{/if}}
        {{ /each }}
      </select>
    </div>
  </script>
  <script src="./node_modules/art-template/lib/template-web.js"></script>
  <script>
    // function get(url, callback) {
    //   let oReq = new XMLHttpRequest()
    //   // 当请求记载成功之后要调用指定的函数
    //   oReq.onload = function () {
    //     // console.log(oReq.responseText)
    //     callback(oReq.responseText) // 执行回调
    //   }
    //   oReq.open('get', url, true)
    //   oReq.send()
    // }

    // get('http://localhost:3000/users/1', function (userData) {
    //   get('http://localhost:3000/jobs', function (jobData) {
    //     // console.log(userData, jobData);
    //     let htmlStr = template('tpl', {
    //       user: JSON.parse(userData),
    //       job: JSON.parse(jobData),
    //     })
    //     // console.log(htmlStr);
    //     document.querySelector('#user_form').innerHTML = htmlStr
    //   })
    // })

    // // Promise 封装ajax
    // function pGet(url) {
    //   return new Promise((resolve, reject) => {
    //     var oReq = new XMLHttpRequest()
    //     // 当请求记载成功之后要调用指定的函数
    //     oReq.onload = function () {
    //       resolve(oReq.responseText)
    //     }
    //     oReq.onerror = function (err) {
    //       reject(err)
    //     }
    //     oReq.open('get', url, true)
    //     oReq.send()
    //   })
    // }
    // pGet('http://localhost:3000/users/1').then(function(data) {
    //   console.log(data);
    // })

    // 合并升级
    // Promise 封装ajax
    function pGet(url, callback) {
      return new Promise((resolve, reject) => {
        var oReq = new XMLHttpRequest()
        // 当请求记载成功之后要调用指定的函数
        oReq.onload = function () {
          callback && callback(oReq.responseText)
          resolve(oReq.responseText)
        }
        oReq.onerror = function (err) {
          callback && callback(err)
          reject(err)
        }
        oReq.open('get', url, true)
        oReq.send()
      })
    }
    // 两种请求方式皆可以
    // 1. 回调
    pGet('http://localhost:3000/users/1', function(data) {
      console.log('回调', data);
    })
    pGet('http://localhost:3000/users/1')
      .then(function(data) {
        console.log('promise', data);
      })
  </script>
</body>

</html>